<template>
  <div id="demo">
    <transition name="fade" mode="out-in">
      <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOn: true
    };
  }
};
</script>
<style scoped>
#demo {
  position: relative;
}
#demo button {
  position: absolute;
  left: 40px;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter {
  transform: translateX(30px);
}
.fade-leave-to {
  transform: translateX(-30px);
}
.fade-enter-active,
.fade-leave-active {
  transition: 1s;
}
</style>